<!-- 基础：1、介绍 声明式渲染 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：1、介绍 声明式渲染</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		{{ message }}
	</div>

	<script type="text/javascript">
		// 只有引入了上面的vue.js，这里才能new Vue的实例
		var app = new Vue({
			el: '#app',               // el就是element元素的意思，表示我这个vue实例是要来控制id='app'这个对象的，写法跟jq元素选择器相同
			data: {                   // data是数据，表示对#app这个元素可以渲染data里面的数据，渲染的方法就是两个中括号加数据名{{ message }}
				message: 'Hello Vue!' // 在html中{{ message }}这个东西被叫做模板，写法称之为Mustache风格语法
			}
		})
		// 通过vue这个实例，数据和DOM被绑定在一起，只要数据发生改变，DOM上显示的东西也相应发生改变，这种特性称之为响应式
		// 可以F12在console控制台输入app.message = 'xxx'来改变数据看看页面是否有什么变化
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->